<template>
  <div>
    <!-- 第0步 -->
    <!-- 步骤条 -->
    <el-steps :active="active" simple>
      <el-step title="步骤 1" icon="el-icon-edit"></el-step>
      <el-step title="步骤 2" icon="el-icon-upload"></el-step>
      <el-step title="步骤 3" icon="el-icon-picture"></el-step>
    </el-steps>
    <!-- 3.使用子组件 -->
    <info v-if="active === 0" />
    <chapter v-if="active === 1" />
    <publish v-if="active === 2||active === 3 " />
  </div>
</template>
<script>
//在vue页面中引入子组件,当前form.vue引入了Info.vue
//使用步骤:1.引入子组件,2.注册子组件,3.可以以标签的方式在页面中使用子组件
import Info from "@/views/course/components/Info.vue";
import Publish from "@/views/course/components/Publish.vue";
import Chapter from "@/views/course/components/Chapter"; //默认查找Chapter下面的index.vue
export default {
  components: {
    //2.注册引入的子组件给当前的vue对象
    Info,
    Publish,
    Chapter,
  },
  data() {
    return {
      courseId: "",
      active: 0,
    };
  },
};
</script>